<template>
  <div class="bill-edit-number-pad">
    <div class="number-pad-header">
      <van-popup 
        v-model="isShowPopup" 
        round 
        position="bottom"
        class="bill-edit-popup"
        @closed="popupClosed">
        <van-datetime-picker
          v-if="isEditDate"
          v-model="currentEditDate"
          type="month-day"
          :show-toolbar="false"
          :max-date="maxDate">
        </van-datetime-picker>
        <div v-if="isEditAccount" class="edit-account-box">
          <div
            v-for="account in getAccountList" 
            :key="account.accountId" 
            @click="editAccountClick(account.accountId)"
            class="edit-account-item" 
            :style="`background-color:${account.color};`">
            <div class="edit-account-icon" :style="`color:${account.color};`">
              <van-icon :name="account.icon" size="6vw"/>
            </div>
            <div class="edit-account-name">
              {{ account.name }}
            </div>
          </div>
        </div>
      </van-popup>
      <div class="number-pad-header-left">
        <van-button @click="editDate" class="number-pad-header-button" plain type="info">{{ getEditDate(currentEditDate) }}</van-button>
      </div>
      <div class="number-pad-header-left">
        <van-button @click="editAccount" class="number-pad-header-button" plain type="info">{{ getEditAccount(currentEditAccount).name }}</van-button>
      </div>
      <div class="number-pad-header-right">
        <van-icon @click="editRemarks" class="number-pad-header-button" name="edit" size="8vw"></van-icon>
      </div>
    </div>
    <div class="number-pad-body">
      <van-button @click="inputContent" class="number-button">7</van-button>
      <van-button @click="inputContent" class="number-button">8</van-button>
      <van-button @click="inputContent" class="number-button">9</van-button>
      <van-button @click="inputContent" class="number-button">删除</van-button>
      <van-button @click="inputContent" class="number-button">4</van-button>
      <van-button @click="inputContent" class="number-button">5</van-button>
      <van-button @click="inputContent" class="number-button">6</van-button>
      <div class="number-button"></div>
      <van-button @click="inputContent" class="number-button">1</van-button>
      <van-button @click="inputContent" class="number-button">2</van-button>
      <van-button @click="inputContent" class="number-button">3</van-button>
      <div class="number-button"></div>
      <van-button @click="inputContent" class="number-button">C</van-button>
      <van-button @click="inputContent" class="number-button">0</van-button>
      <van-button @click="inputContent" class="number-button">.</van-button>
      <van-button @click="inputContent" class="confirm-button">确认</van-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
import { BillModule, BillType, IBillData, updateType } from '../../../store/modules/bill';
import { UserModule, IAssetAccount } from '../../../store/modules/user';
import { Toast } from 'vant';

@Component({
  name: 'BillEditFooter',
})
export default class extends Vue {
  @Prop({ default: '0' }) private readonly tagId!: number;
  @Prop({ default: BillType.Expense }) private readonly billType!: BillType;
  @Prop({ default: 0 }) private readonly billAccountId!: number;

  private currentEditId: number = Math.floor(Math.random() * 100000000);
  private currentEditDate: Date = new Date();
  private currentEditAccount: number = UserModule.userConfig.assetAccountList[0].accountId;
  private currentValue: string = '0';
  private maxDate: Date = new Date();
  private isEditDate = false;
  private isEditAccount = false;
  private isShowPopup = false;
  private test = 0;

  @Emit('updateCurrentValue')
  private updateCurrentValue(currentValue: string): string {
    return currentValue;
  }

  private mounted() {
    if (BillModule.currentEditBillId !== 0) {
      this.currentEditId = this.getCurrentEditBill.billId;
      this.currentValue = this.getCurrentEditBill.amount.toString();
      this.currentEditDate = new Date(this.getCurrentEditBill.createTime);
      this.currentEditAccount = this.getCurrentEditBill.billAccountId;
    }
  }

  private get getCurrentEditBill(): IBillData {
    return BillModule.bills.find((item) => {
      return item.billId === BillModule.currentEditBillId;
    }) as IBillData;
  }
  private get getEditDate() {
    return (date: Date) => {
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${month}月${day}日`;
    };
  }
  private get getEditAccount() {
    return (accountId: number) => {
      return UserModule.userConfig.assetAccountList.find((current) => {
        return current.accountId === accountId;
      });
    };
  }
  private get getAccountList(): IAssetAccount[] {
    return UserModule.userConfig.assetAccountList;
  }

  private inputContent(event: MouseEvent) {
    const button = event.target as HTMLButtonElement;
    const input = button.textContent as string;
    switch (input) {
      case 'C':
        this.currentValue = '0';
        break;
      case '删除':
        this.deleteClick();
        break;
      case '确认':
        this.confirmClick();
        break;
      case '.':
        this.pointClick();
        break;
      case '+':
      case '-':
        break;
      default:
        this.numberClick(input);
    }
    this.updateCurrentValue(this.currentValue);
  }
  private numberClick(input: string) {
    if (this.currentValue === '0') {
      if ('0123456789'.indexOf(input) >= 0) {
        this.currentValue = input;
      } else {
        this.currentValue += input;
      }
      return;
    }
    if (this.currentValue.length > 10) {
      return;
    }
    if (this.currentValue.indexOf('.') !== -1 && this.currentValue.length - this.currentValue.indexOf('.') === 3) {
      return;
    }
    this.currentValue += input;
  }
  private deleteClick() {
    if (this.currentValue.length === 1) {
      this.currentValue = '0';
    } else {
      this.currentValue = this.currentValue.slice(0, -1);
    }
  }
  private pointClick() {
    if (this.currentValue.indexOf('.') === -1) {
      this.currentValue += '.';
    }
  }
  private confirmClick() {
    const currentAmount = Number(this.currentValue);
    if (isNaN(currentAmount) || currentAmount === 0) {
      Toast.fail({
        message: '请输入正确的金额',
        forbidClick: true,
        duration: 1000,
      });
      return;
    }
    const billDate: IBillData = {
      billId: this.currentEditId,
      billTagId: this.tagId,
      billAccountId: this.currentEditAccount,
      billType: this.billType,
      createTime: this.currentEditDate.getTime(),
      amount: currentAmount,
    };
    const router = '$router';
    this[router].push({ path: 'bill' });
    if (BillModule.isAddBillStatus) {
      BillModule.updateBill({ type: updateType.Insert, billData: billDate } );
      BillModule.toggleIsAddBillStatus(false);
    } else {
      BillModule.updateBill({ type: updateType.Update, billData: billDate });
      BillModule.toggleIsEditBillStatus(false);
    }
  }
  private editAccountClick(accountId: number) {
    this.currentEditAccount = accountId;
    this.popupClosed();
  }
  private popupClosed() {
    this.isEditDate = false;
    this.isEditAccount = false;
    this.isShowPopup = false;
  }
  private editDate() {
    this.isEditDate = true;
    this.isShowPopup = true;
  }
  private editAccount() {
    this.isEditAccount = true;
    this.isShowPopup = true;
  }
  private editRemarks() {
    Toast.fail({
      message: '暂不支持',
      forbidClick: true,
      duration: 500,
    });
  }
}
</script>

<style scoped>
.bill-edit-number-pad {
  height: 100%;
  background-color: white;
}
.number-pad-header {
  height: 100px;
  border-top: 1px solid #D0CECF;
}
.number-pad-header-left {
  float: left;
  height: 100px;
}
.number-pad-header-right {
  float: right;
  height: 100px;
  color: #D0CECF;
}
.number-pad-header-button {
  margin: 20px;
  height: 60px;
  font-size: 30px;
}
.number-pad-body {
  height: 400px;
  background-color: #D0CECF;
}
.number-button ,.confirm-button{
  float: left;
  width: 25%;
  height: 100px;
  font-size: 40px;
  overflow: hidden;
  background-color: #F3F3F3;
}
.confirm-button {
  background-color: #409EFF;
  color: white;
}
.bill-edit-popup {
  height: 300px;
}
.edit-account-box {
  height: 100%;
  overflow: scroll;
}
.edit-account-item {
  display: flex;
  align-items: center;
  height: 100px;
  padding-left: 20px;
}
.edit-account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 60px;
  background-color: white;
  border-radius: 50%;
}
.edit-account-name {
  padding-left: 20px;
  color: white;
}
</style>